<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#999"></uni-icons></view>
			<view class="center">应急广播</view>
			<view class="right" @click="add"><uni-icons type="plusempty" size="20" color="#999"></uni-icons></view>
		</view>
		<!--列表-->
		<scroll-view @scrolltolower="getNextPageData" scroll-y="true" class="scroll">
			<view class="card" v-for="(item, index) in list" :key="index" @click="playRecord(item.url, index)">
				<view class="title"><view class="name">发送人：{{ item.addman_name }}</view></view>
				<view class="item">{{ item.addtime }}</view>
				<image v-show="playIndex === index" src="../../../static/voice.gif"></image>
				<image v-show="playIndex !== index" src="../../../static/play.png"></image>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;

export default{
	components: { uniIcons },
	data(){
		return {
			playIndex: '',
			tabIndex: 0,
			userid: uni.getStorageSync('userid'),
			page: 1,
			total: 1,
			list: []
		}
	},
	onShow(){
		this.getList();
	},
	onHide(){
		this.playIndex = '';
		innerAudioContext.stop();
	},
	onLoad(){
		let _this = this;
		innerAudioContext.onEnded(()=>{
			_this.playIndex = '';
		})
	},
	onBackPress(){
		this.playIndex = '';
		innerAudioContext.stop();
	},
	methods: {
		// 返回
		goBack(index){
			uni.navigateBack();
		},
		// 新增
		add(){
			this.playIndex = '';
			innerAudioContext.stop();
			uni.navigateTo({ url: 'add' })
		},
		// 播放录音
		playRecord(url, index){
			this.playIndex = index;
			innerAudioContext.src = url.substr(0,4) == 'http' ? url : this.$API.baseURL + url;
			innerAudioContext.play();
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.emergencyBroadcastList,
				data: { userid: this.userid },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
					
					_this.list = _this.list.map(item=>{
						item.isPlay = false;
						return item;
					});
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.scroll{
	height: calc(100vh - 100upx);
	box-sizing: border-box;
	padding: 20upx 0;
	overflow: hidden;
}


/*卡片*/
.card{
	margin: 0 20upx 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	background-color: #fff;
	position: relative;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card image{
	width: 60upx;
	height: 60upx;
	position: absolute;
	right: 26upx;
	top: 30upx;
}
</style>
